<template>
  <div class="main-content f-cb">
    <div class="table-wrapper">                
      <el-row class="table-header" type="flex" align="middle">
        <el-col :span="12" class="table-row-content">
          <div class="table-header-title">会员账户明细表</div>
        </el-col>
        <el-col :span="12" class="table-row-content">
          <div class="table-right">
            <el-button type="text" class="deposit" @click="innerVisible = true">调节会员账户>></el-button>
          </div>
        </el-col>
      </el-row>
      <el-row class="table-row" type="flex" align="middle">
        <el-col :span="20" class="table-row-content">
          <div class="table-cell">
            当前会员：<span>{{userName}}</span>
            ,    账户余额：<span>{{(balance / 100).toFixed(2)}}</span>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="table_container">
      <el-table
        v-loading="tableLoading"
        :data="tableData"
        highlight-current-row
        border
        stripe
        style="width: 100%">
        <el-table-column
            property="gmtCreate"
            label="时间"
            width='200'>
        </el-table-column>
        <el-table-column
            label="类型">
            <template slot-scope="scope">
              {{ scope.row.transDirection == 'IN' ? '增加' : '减少'}}
            </template>
        </el-table-column>
        <el-table-column
            label="金额"
            width="100">
            <template slot-scope="scope">
              {{ (scope.row.transDirection == 'IN' ? '' : '-') + (scope.row.transAmount/100).toFixed(2)}}
            </template>
        </el-table-column>
        <el-table-column
            label="备注"
            width='250'>
            <template slot-scope="scope">
              {{remark(scope.row)}}
            </template>
        </el-table-column>
      </el-table>
      <div class="Pagination" style="text-align: left;margin-top: 10px;">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-size="limit"
            :page-count="10"
            layout="total, prev, pager, next"
            :total="count">
        </el-pagination>
      </div>
    </div>
    <el-dialog
        width="40%"
        title="调帐"
        :visible.sync="innerVisible"
        append-to-body>
        <moneySet :userName="userName" :userId="id" v-on:balance-update='balanceUpdate'>
        </moneySet>
      </el-dialog>
  </div>
</template>

<script>
    import {adminGetAccountLog} from '@/api/points'
    import {getUserAccount} from '@/api/myinfo'
    import moneySet from '@/page/admin/moneySet'

    export default {
      data () {
        return {
          tableData: [],
          currentRow: null,
          offset: 0,
          limit: 20,
          count: 0,
          currentPage: 1,
          tableLoading: false,
          // balance: 0,
          // userName: ''
          innerVisible: false
        }
      },
      props: ['balance', 'userName', 'id'],
      components: {
        moneySet
      },
      mounted () {
        this.initData()
      },
      methods: {
        initData () {
          // this.userInfo()
          this.adminGetAccountLog(this.currentPage, this.limit)
        },
        // async userInfo () {
        //   try {
        //     // const account = await getAccount();
        //     const result = await getUserAccount()
        //     if (result.status === 200 && result.data.code === 200) {
        //       let data = result.data
        //       this.balance = data.data.balance
        //       this.userName = data.data.userName
        //     }
        //   } catch (err) {
        //     console.log(err)
        //   }
        // },
        async adminGetAccountLog (page, size) {
          // let d = {
          //   userAccountId: window.userId
          // }
          this.tableLoading = true

          // let direction = this.$route.query.tab === 'deposit' ? 'IN' : 'OUT'
          let params = {
            pageIndex: page,
            pageSize: size,
            // transDirection: direction,
            userName: this.userName
          }
          let result = await adminGetAccountLog(params)
          if (result.status === 200) {
            let data = result.data.data
            this.tableData = data
            this.count = result.data.page.total
          }
          this.tableLoading = false
        },
        remark (detail) {
          let transCode = detail.transCode
          if (transCode === '300102') {
            return '消费支付'
          } else if (transCode === '300101') {
            return '消费支付'
          } else if (transCode === '200112') {
            return '调账减少金币'
          } else if (transCode === '200111') {
            return '调账增加金币'
          } else if (transCode === '200101') {
            return '支付宝充值'
          }
        },
        handleCurrentChange (page) {
          console.log(page)
          this.currentPage = page
          this.adminGetAccountLog(this.currentPage, this.limit)
        },

        handleSizeChange (page) {
        },
        balanceUpdate() {
          this.innerVisible = false
          this.adminGetAccountLog(this.currentPage, this.limit)
          this.$emit('balance-update')
        }
  }
    }
</script>

<style lang="less" scoped>
    @import '../../style/mixin';
    .label-title{
        font-weight: bold;
        font-size: 24px;
        color: #ff633b;
        margin: 30px;
    }
    .main-content{
        padding: 0px 40px;
    }
    .table-wrapper {
        border: 1px solid #ebeef5;
        margin: 30px 0;
    }

    .table-row {
        border-bottom-width: 1px;
        border-bottom-color: #ebeef5;
        border-bottom-style: solid;
    }

    .table-cell {
        margin: 10px 20px;
        // min-height: 48px;
        // border-right-width: 1px;
        // border-right-color: #ebeef5;
        // border-right-style: solid;
    }

    .table-header {
        min-height: 48px;
        border-bottom-width: 1px;
        border-bottom-color: #ebeef5;
        border-bottom-style: solid;
        background: #f6f6f6;
    }
    .table-header-title {
        margin-left: 10px;
    }
    .table-right {
      text-align: right;
      margin-right: 10px;
    }
</style>
